<template>
	<h1>LifecycleDemo</h1>
	<div ref="headline">{{ count }}</div>
	<button @click="increase">increase</button>
</template>

<script lang="ts">
import { onMounted, defineComponent, onUpdated, ref } from 'vue'
export default defineComponent({
	name: 'LifecycleDemo',
	setup() {
		const count = ref<number>(0)
		const increase = () => count.value++

		// 模版引用
		const headline = ref<HTMLElement | null>(null)
		console.log('in setup', headline.value)

		onMounted(() => {
			console.log('mounted', headline.value?.innerHTML)
		})
		onUpdated(() => {
			console.log('updated')
		})

		return { count, increase, headline }
	}
})
</script>
<style lang="scss" scoped></style>
